<template>
	<view class="content">
		<scroll-view style="height: calc(100vh - 80rpx);" class="wid100" scroll-y="true" @scrolltolower="lower">
			<block v-for="(item,index) in list" :key="index">
				<view style="height: 45rpx;"></view>
				<view class="wid90 mar borRad20 bacFFF" @click="xuanze(item)" style="padding: 30rpx 0;" 
					:style="item.id == id?'border: 4rpx solid #035DFF;':'border: 4rpx solid #fff;'">
					<view class="wid90 mar dis disAl disJuB">
						<view class="foSi35 fowe600">{{item.name}}</view>
						<view class="dis disAl">
							<image src="../../static/weizhi.png" style="width: 20rpx;height: 20rpx;"></image>
							<view class="foSi30 mar-left10">{{item.distance}}km</view>
						</view>
					</view>
					<view class="wid90 mar mar-top10 foSi20" style="color: #686868;">{{item.address}}</view>
					<view class="dis disAl disJuB wid90 mar foSi25 fowe600" style="margin-top: 45rpx;"
						:style="item.id == id?'color: #035DFF;':''">
						<view>会员价：{{item.ninety_two_oil}}</view>
						<view class="dis disAl">
							<view>去加油</view>
							<uni-icons type="right" :color="item.id == id?'color: #035DFF;':''" size="25rpx"></uni-icons>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				last_page: 0,
				page: 1,
				list: [],
				id: ''
			}	
		},
		onLoad(option) {
			uni.showLoading({
				title:'加载中...'
			})
			console.log(option.id)
			if(option.id){
				this.id = option.id
			}
			this.getLocation()
		},
		methods: {
			getLocation() {
				let that = this
				// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				uni.getSetting({
					success(res) {
						console.log(res)
						// 如果没有授权
						if (!res.authSetting['scope.userLocation']) {
							// 则拉起授权窗口
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									uni.getLocation({
										type: 'wgs84',
										success: function(res) {
											uni.setStorageSync('location_y', res.longitude.toFixed(6))
											uni.setStorageSync('location_x', res.latitude.toFixed(6))
											that.getList()
										},
										fail(error) {
											console.log('失败', error)
										}
									})
								},
								fail(error) {
									//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
									console.log('拒绝授权', error)
									that.getList()
								}
							})
						} else {
							// 有权限则直接获取
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									uni.setStorageSync('location_y', res.longitude.toFixed(6))
									uni.setStorageSync('location_x', res.latitude.toFixed(6))
									that.getList()
								},
								fail(error) {
									uni.showToast({
										title: '请勿频繁调用！',
										icon: 'none',
									})
									console.log('失败', error)
									that.getList()
								}
							})
						}
					}
				})
			},
			getList() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_list',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
					},
					data: {
						location_y: uni.getStorageSync('location_y')?uni.getStorageSync('location_y'):'104.480609',
						location_x: uni.getStorageSync('location_x')?uni.getStorageSync('location_x'):'36.305564',
						page: that.page,
						limit: 10,
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							console.log(uni.getStorageSync('jiaId'));
							if(uni.getStorageSync('jiaId')){
								that.last_page = result.data.last_page
								that.list = that.list.concat(result.data.data)
							}else{
								uni.setStorageSync('jiaId', result.data.data[0].id)
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			xuanze(item){
				uni.setStorageSync('jiaId', item.id)
				uni.navigateBack()
			},
			lower(e) {
				if(this.last_page > this.page){
					this.page++
					this.getList()
				}
			},
		}
	}
</script>

<style>
	.content {
		background: linear-gradient(#E4F7FD 20%, #F8F9FD 80%);
		min-height: 100vh;
	}

</style>
